
<template>
  <view class="root">
    <view class="header">
      <view class="status-bar" />
      <view @click="getUserInfo" class="ai-center f1 jc-center pb-60">
        <image
          class="avatar br-circle"
          mode="aspectFill"
          :src="userInfo.avatar || '/static/imgs/default-avatar.png'"
        />
        <text class="nickname color-fff mt-12 fs-36">
          {{ userInfo.nickname || "点击授权信息" }}
        </text>
      </view>
    </view>
    <view
      v-for="(cell, cellIndex) in options"
      :key="cellIndex"
      class="section bgc-fff"
    >
      <view
        v-for="(item, itemIndex) in cell"
        :key="item.title"
        hover-class="btn-hover"
        @click="todo(cellIndex, itemIndex)"
        :style="{
          'border-top': itemIndex ? '1rpx solid #f9f9f9' : 'none',
        }"
        class="option fd-row ai-center height-100"
      >
        <image class="width-38 height-38" :src="item.icon" mode="aspectFit" />
        <text class="f1 ml-30 mr-30 fs-28 color-666 fw-500">
          {{ item.title }}
        </text>
        <image class="width-18 height-32" src="/static/imgs/icon-right.png" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my",
    data: () => ({
      userInfo: uni.getStorageSync("userInfo"),
      options: [
        [
          {
            title: "个人信息",
            icon: "/static/imgs/icon-personalInfo.png",
            url: "/pages/personalInfo",
          },
          {
            title: "地址管理",
            icon: "/static/imgs/icon-address.png",
            url: "/pages/addressManager",
          },
          {
            title: "我的社群",
            icon: "/static/imgs/icon-communityGroup.png",
            url: "/pages/myCommunityGroup",
          },
        ],
        [
          {
            title: "反馈和帮助",
            icon: "/static/imgs/icon-aboutUs.png",
            url: "/pages/feedback",
          },
          {
            title: "关于我们",
            icon: "/static/imgs/icon-aboutUs.png",
            url: "/pages/about",
          },
          // #ifndef MP-WEIXIN
          {
            title: "退出登录",
            icon: "/static/imgs/icon-signOut.png",
            url: "/pages/login?init=true",
            signOut: true,
          },
          // #endif
        ],
      ],
    }),
    created() {
      uni.$on(
        "updateUserInfo",
        () => (this.userInfo = uni.getStorageSync("userInfo"))
      );
      // #ifdef APP-PLUS
      this.pages[this.pages.length - 1].$getAppWebview().setStyle({
        pullToRefresh: { support: false },
      });
      // #endif
    },
    // #ifdef APP-PLUS
    destroyed() {
      uni.$off("updateUserInfo");
      this.pages[this.pages.length - 1].$getAppWebview().setStyle({
        pullToRefresh: { support: true },
      });
    },
    // #endif
    methods: {
      getUserInfo() {
        if (this.userInfo.avatar) return;
        uni.getUserProfile({
          desc: "授权信息用于社区头像及昵称展示",
          success: ({ userInfo: { avatarUrl, nickName } }) => {
            uni.fetch("/api/user/upinfo", {
              data: {
                img: avatarUrl,
                nickname: nickName,
              },
              success: (res) => {
                this.userInfo = Object.assign(
                  uni.getStorageSync("userInfo"),
                  res
                );
                uni.setStorage({
                  key: "userInfo",
                  data: this.userInfo,
                });
              },
            });
          },
        });
      },
      todo(cellIndex, itemIndex) {
        const { url, signOut } = this.options[cellIndex][itemIndex];
        if (!signOut) {
          uni.navigateTo({ url });
          return;
        }
        uni.clearStorageSync();
        uni.reLaunch({ url });
      },
    },
  };
</script>

<style scoped>
  .header {
    height: 300px;
    background: linear-gradient(90deg, #8ec5fc, #4388e7);
  }

  .avatar {
    width: 180rpx;
    height: 180rpx;
  }

  .section {
    box-shadow: 0 5rpx 20rpx 0 rgba(151, 166, 192, 0.22);
    border-radius: 10px;
    margin: -60rpx 30rpx 90rpx;
    padding: 30rpx;
  }
</style>